<template>
  <div>
    <song-cate @changeCate="changeCate"></song-cate>
    <div class="songDetail">
      <div v-for="item in songDetail" :key="item.id" class="songInfo">
        <song-item
          @click="goSongDetail(item.id)"
          :playCount="item.playCount"
          :picUrl="item.coverImgUrl"
          :name="item.name"
          :nickname="item.nickname"
        ></song-item>
      </div>
    </div>
    <music-pagenation
      pageNum="10"
      :currentPage="currentPage"
      @changeCurrentPage="changeCurrentPage"
    ></music-pagenation>
  </div>
</template>

<script setup lang="ts">
type songDetailT = {
  id: number;
  name: string;
  description: string;
  playCount: number;
  coverImgUrl: string;
};
import songCate from "./songcate.vue";
import songItem from "@/components/songItem.vue";
import MusicPagenation from "@/components/pagenationMusic.vue";
import { onMounted, ref, computed, defineEmits } from "vue";
import { useRouter } from "vue-router";
import axios from "@/http.ts";
onMounted(() => {
  getSongAllList();
});
const emit = defineEmits(["changeCate"]);
const currentPage = ref<number>(1);
const currentTag = ref<string>("全部");
const songDetail = ref<Array<songDetailT>>([]);
let total = 0;
const router = useRouter();
const goSongDetail = (id) => {
  router.push("/home/playList/" + id);
};
const changeCurrentPage = (item) => {
  currentPage.value = item;
  getSongAllList();
};
const changeCate = (tag: string) => {
  currentTag.value = tag;
  emit("changeCate", tag);
  getSongAllList();
};
const getSongAllList = () => {
  axios
    .get("/top/playlist", {
      params: {
        limit: 100,
        offset: currentPage.value,
        cat: currentTag.value,
      },
    })
    .then((res) => {
      res.data.code === 200 &&
        (songDetail.value = res.data.playlists.map((item) => {
          return { ...item, nickname: item.creator.nickname };
        }));
      total = res.data.total;
      console.log(songDetail.value);
    });
};
</script>

<style lang="scss" scoped>
.songDetail {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .songInfo {
    box-sizing: border-box;
    position: relative;
    flex-basis: 157px;
    // text-align: center;
  }
}
</style>
